import React, { Component } from 'react';
import {
  StyleSheet, View, Image, Dimensions, ScrollView, DeviceEventEmitter, TouchableOpacity, Alert, TouchableWithoutFeedback,
} from 'react-native';
import { Text, Accordion } from 'native-base';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { produce } from 'immer';
import ZlstIcon from '../../../../components/zlst-icons';
import Theme from '../../../../native-base-theme/variables/commonColor';
import { UtilToast } from '../../../../utils/util-method';
import * as sparePartService from '../../../../services/sparePart';
import { FormText } from '../../../../components';

class Info extends Component {
  static navigationOptions = {
    header: null,
  }

  constructor(props) {
    super(props);
    this.state = {
      code: '',
      name: '',
      model: '',
      apply: '',
      datas: [],
    };
  }

  // 初始化
  componentDidMount() {
    if (this.props.navigation) { // 路由带入参数
      const par = this.props.navigation.state.params;
      this.getServerInfo(par.code);
    } else {
      this.swipeToDetailListhener = DeviceEventEmitter.addListener('swipeToDetail', this.queryInfoEvent);
    }
  }

  componentWillUnmount() {
    if (this.swipeToDetailListhener) {
      this.swipeToDetailListhener.remove();
    }
  }

  queryInfoEvent = (params) => {
    if (params) {
      this.getServerInfo(params.code);
    }
  }

  getServerInfo = async (materialCode) => {
    try {
      DeviceEventEmitter.emit('showLoading', true);
      const data = await sparePartService.querySpartPartInfo({ materialCode });
      DeviceEventEmitter.emit('showLoading', false);
      if (data) {
        this.setState(produce(draft => {
          // eslint-disable-next-line no-restricted-syntax
          draft.code = data.mmMaterialDefinition.materialCode1;
          draft.name = data.mmMaterialDefinition.materialName;
          draft.model = data.mmMaterialDefinition.materialSpecModel;
          draft.apply = data.mmMaterialDefinition.supplierName;
          draft.datas = data.emsWmsWarehouseVos;
        }));
      }
    } catch (e) {
      console.log(e);
      DeviceEventEmitter.emit('showLoading', false);
    }
  }

  _toMianPage = () => {
    if (this.props.navigation) {
      this.props.navigation.goBack();
    } else {
      DeviceEventEmitter.emit('swiperIncidentPageEvent', -1);
    }
  }

  _renderHeader(item, expanded) {
    return (
      <View style={{
        flexDirection: 'row',
        padding: 8,
        marginTop: 8,
        marginLeft: 8,
        marginRight: 8,
        justifyContent: 'space-between',
        borderRadius: 4,
        alignItems: 'center',
        backgroundColor: 'rgba(255,255,255,0.2)',
      }}
      >
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <View style={{ flex: 5, alignItems: 'center', flexDirection: 'row' }}>
            <View style={[styles.level, { backgroundColor: item.safetyStock && item.packQuantity <= item.safetyStock ? 'red' : 'green', borderColor: 'white' }]} />
            <Text style={{ color: 'white' }}>{item.warehouseName}</Text>
          </View>
          <View style={{ flex: 1, alignItems: 'flex-end' }}>
            <Text style={{ color: 'white' }}>({item.packQuantity})</Text>
          </View>
        </View>
        {expanded
          ? <Icon style={{ fontSize: 24, color: 'white' }} name="chevron-up" />
          : <Icon style={{ fontSize: 24, color: 'white' }} name="chevron-down" />}
      </View>
    );
  }

  _renderContent(item) {
    return (
      <View style={{ backgroundColor: Theme.myPrimary, marginLeft: 8, marginRight: 8 }}>
        {
          item.locatorWithStocks.map((data, index) => (
            <Text style={{ padding: 8, color: 'white' }} key={index}>
              {data.loactorName}：{data.packQuantity} {data.packageUnit}
            </Text>
          ))
        }
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header_container}>
          <View style={{ flex: 1 }}>
            <TouchableWithoutFeedback onPress={this._toMianPage}>
              <View style={{ paddingLeft: 8, paddingRight: 8, paddingTop: 16, paddingBottom: 16 }}>
                <ZlstIcon
                  style={styles.backIcon}
                  name="fanhui"
                  size={20}
                  color="white"
                />
              </View>
            </TouchableWithoutFeedback>
          </View>
          <View style={{ flex: 1, alignItems: 'center' }}><Text style={styles.headerText}>备件库存详情</Text></View>
          <View style={{ flex: 1 }} />

        </View>
        <ScrollView>
          <View>
            <View style={styles.title_container}><FormText name="基础信息" fontColor="black" /></View>
            <FormText name="编码" value={this.state.code} />
            <FormText name="名称" value={this.state.name} />
            <FormText name="型号" value={this.state.model} />
            <FormText name="供应商" value={this.state.apply} />
            <View style={styles.title_container}><FormText name="库存信息" fontColor="black" /></View>
            {this.state.datas.length > 0 && (
              <Accordion
                style={{ borderWidth: 0 }}
                dataArray={this.state.datas}
                renderHeader={this._renderHeader}
                renderContent={(item) => this._renderContent(item)}
              />
            )}
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    backgroundColor: Theme.myPrimary,
  },
  title_container: {
    width: '100%',
    backgroundColor: 'white',
    borderLeftWidth: 8,
    borderLeftColor: '#4f6fe3',
    paddingTop: 4,
    paddingBottom: 4,
    // borderRadius: 4,
  },
  header_container: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerText: {
    color: 'white',
    fontWeight: 'bold',
  },
  level: {
    marginRight: 8,
    borderWidth: 1,
    borderStyle: 'solid',
    borderRadius: 15,
    width: 20,
    height: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Info;
